<template>
  <div class="warp">
    <div class="head">
      <button>快速登录</button>
      <button>手机登录</button>
    </div>
    <van-form @submit="onSubmit">
      <van-field
        v-model="userInfo.userName"
        name="userName"
        label="用户名"
        placeholder="用户名"
        :rules="[
          { required: true, message: '请填写用户名' },
          {
            validator: (value) => {
              if (value === '哈哈') {
                return true;
              } else {
                return false;
              }
            },
            message: '哈哈，你只能输入哈哈',
          },
        ]"
      />
      <van-field
        v-model="userInfo.pwd"
        type="password"
        name="pwd"
        label="密码"
        placeholder="密码"
        :rules="[
          { required: true, message: '请填写密码' },
          {
            pattern: /^\d{4,8}$/,
            message: '密码是4-8位的数字',
          },
        ]"
      />
      <div class="btn">
        <van-button round block type="info" native-type="submit"
          >登录</van-button
        >
        <van-button round block type="info" native-type="submit"
          >注册</van-button
        >
      </div>
      <router-link to="/home"><p>忘记密码?</p></router-link>
    </van-form>
  </div>
</template>

<script>
export default {
  data () {
    return {
      userInfo: {
        userName: '',
        pwd: ''
      }
    }
  },
  methods: {
    onSubmit (params) {
      /*
      模拟接口
      */
      setTimeout(() => {
        const token = 'dwihdj398r93rfiehcdfd'
        const userInfo = {
          nickName: '哈哈哈'
        }
        /*
        缓存
        */
        localStorage.setItem('token', token)
        localStorage.setItem('userInfo', JSON.stringify(userInfo))
        // 跳转路由
        if (this.$route.query.from) {
          this.$router.replace(this.$route.query.from)
        } else {
          this.$router.replace('/home')
        }
        /*
        取判断是否首次取
        var items = localStorage.getItem('userInfo')
                  ?
                  JOSN.parse(localStorage.getItem('userInfo'))
                  :
                  {}
        */
      }, 2000)
    }
  }
}
</script>

<style lang="scss" scoped>
.warp {
  margin-top: 90px;
  width: 100%;
  height: 800px;
  background: linear-gradient(to bottom, pink, red);
  padding: 10px;
  box-sizing: border-box;
  .head {
    margin-top: 50px;
    button {
      width: 50%;
      border-radius: 20px;
      background: linear-gradient(to right, pink, red);
      color: gold;
    }
  }
  .van-cell {
    border-radius: 50px;
    margin: 0 auto;
    width: 65% !important;
    margin-top: 50px;
  }
  .btn {
    margin: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .van-button {
    width: 35%;
    display: inline-block;
    margin-left: 15px;
    background: pink;
    color: red;
    border: none;
  }
  p {
    text-align: right;
    font-size: 15px;
    text-decoration: underline;
  }
}
</style>
